<template>
    <div class="region">
        <div class="region-content">
            <div class="region-content-left">地区:</div>
            <ul>
                <li :class="{active:activeFlag==''}" @click="changeRegion('')">全部</li>
                <li v-for="item in regionArr" :class="{active:activeFlag==item.value}" :key="item.value" @click="changeRegion(item.value)">{{ item.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from "vue";
import { reqHospitalLevelAndArea } from "../../../api/home/index";
import type { HospitalLevelAndAreaResponseData,HospitalLevelAndAreaArr } from "../../../api/home/type";
let regionArr= ref<HospitalLevelAndAreaArr>([]);
let activeFlag = ref<string>('');
onMounted(()=>{
    getRegion();
});
const getRegion=async()=>{
    let result:HospitalLevelAndAreaResponseData = await reqHospitalLevelAndArea('Beijin');
    if(result.code==200){
        regionArr.value = result.data;       
    }
};
const changeRegion=(item:string)=>{
    activeFlag.value = item;
    $emit('getRegion',item);
}
let $emit = defineEmits(['getRegion'])
</script>

<style scoped lang="scss">
    .region{
        color:#a7abb7;
        display:flex;
        margin-top:20px;
        .region-content{
            display:flex;
            .region-content-left{
                margin-right:7px;
                width:45px;
            }
        ul{
            flex-wrap:wrap;
            display:flex;
            li{
                margin-right:10px;
                &.active{
                    color:#e38b00;
                }
            }
            li:hover{
                color:#e38b00;
                cursor:pointer;
            }
        }
        }
    }
</style>